<template>
    <div class="picking zy-content ">
        <back-level @click="close"/>
        <Card :title="`${$t('preliminary.BasicInformation')}`" class="detail-content-layout">

            <div class="basic-info">
                <div class="basic-info-body">
                    <Row
                        style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;border-right: 1px solid #eeeeee">
                        <Col span="8">
                            <!-- <Row> -->
                            <span class="basic-info-body-label">{{ $t('spareParts.PurchasingNo') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.purchaseOrderCode }}</span>
                            <!-- <Col class="basic-info-body-label" span="10">采购订单号</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.ebeln }}</Col> -->
                            <!-- </Row> -->
                        </Col>
                        <Col span="8">
                            <!-- <Row> -->
                            <span class="basic-info-body-label">{{ $t('preliminary.ContractNumber') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.zzhth }}</span>
                            <!-- </Row> -->
                        </Col>
                        <Col span="8">
                            <!-- <Row> -->
                            <span class="basic-info-body-label">{{ $t('preliminary.ProjectName') }}</span>
                            <span class="basic-info-body-item">
                        <Tooltip max-width="500" v-if="detailObj.zzxmbh">
                            <span class="over-wrapper">{{ detailObj.zzxmbh }}</span>
                            <span slot="content">
                                <span>{{ detailObj.zzxmbh }}</span>
                            </span>
                        </Tooltip>
                                <!--   {{ detailObj.ZZXMBH }}-->
                        </span>
                            <!-- </Row> -->
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eeeeee;border-right: 1px solid #eeeeee">
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.Entity') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.werksName }}</span>
                        </Col>
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.Vendor') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.name1 }}</span>
                        </Col>
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.VendorCode') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.lifnr }}</span>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eeeeee; border-right: 1px solid #eeeeee">
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.EquipmentName') }}</span>
                            <span class="basic-info-body-item">
                        <Tooltip max-width="500" v-if="detailObj.txz01">
                            <span class="over-wrapper">{{ detailObj.txz01 }}</span>
                            <span slot="content">
                                <span>{{ detailObj.txz01 }}</span>
                            </span>
                        </Tooltip>
                                <!--   {{ detailObj.TXZ01 }}-->
                        </span>

                        </Col>
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.OrderQuantity') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.menge }}</span>
                        </Col>
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.NonArrivalQuantity') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.wdhzs }}</span>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eeeeee ; border-right: 1px solid #eeeeee">
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.ReceivedQuantity') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.ydhzs }}</span>
                        </Col>
                        <Col span="8">
                            <Col class="basic-info-body-label">{{ $t('preliminary.Buyer') }}</Col>
                            <Col class="basic-info-body-item">{{ detailObj.verkf }}</Col>
                        </Col>
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.ProjectOwner') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.projectManager }}</span>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eeeeee; border-right: 1px solid #eeeeee">
                        <Col span="8">
                            <span class="basic-info-body-label">{{ $t('preliminary.OrderingDate') }}</span>
                            <span class="basic-info-body-item">{{ detailObj.cdate }}</span>
                        </Col>
                        <Col span="8">

                            <span class="basic-info-body-label">{{ $t('spareParts.contract') }}</span>
                            <span class="basic-info-body-item file">
                        <span class="file-list" v-for="(item, index) in detailObj.purchaseContractList" :key="index">
                             <Tag class="item-src" color="blue" type="border" @click.native="handlePreview(item)">
                                {{ item.fileName }}
                             </Tag>
                        </span>
                        </span>
                        </Col>
                    </Row>
                </div>
            </div>


        </Card>
        <!-- <Card :title="`${$t('ledger.attachmentinformation')}`" class="detail-content-layout mt16">
            <div class="basic-info">
                <div class="basic-info-body">
                    <Row style="border: 1px solid #eeeeee;">
                        <Col span="24">
                            <Col class="basic-info-body-label-file" span="4">{{ $t('preliminary.Specification') }}</Col>
                            <Col span="18" class="file-content ">
                            <span class="file-list" v-for="(item, index) in detailObj.technicalDocumentList"
                                  :key="index">
                                <Tag class="item-src" color="blue" type="border"
                                     @click.native="handlePreview(item)">{{ item.fileName }}</Tag>
                            </span>
                            </Col>
                        </Col>
                    </Row>
                </div>
                <div class="basic-info-body">
                    <Row style="border-right: 1px solid #eeeeee;">
                        <Col span="24">
                            <Col class="basic-info-body-label-file " span="4">{{
                                    $t('preliminary.RequestDocument')
                                }}
                            </Col>
                            <Col span="18" class="file-content">
                    <span class="file-list" v-for="(item, index) in detailObj.requirementsDocumentList" :key="index">
                        <Tag class="item-src" color="blue" type="border" @click.native="handlePreview(item)">
                            {{ item.fileName }}
                        </Tag>
                    </span>
                            </Col>
                        </Col>
                    </Row>
                </div>
                <div class="basic-info-body">
                    <Row style="border: 1px solid #eeeeee;">
                        <Col span="24">
                            <Col class="basic-info-body-label-file" span="4">{{
                                    $t('preliminary.CapExAppilicationList')
                                }}
                            </Col>
                            <Col span="18" class="file-content">
                            <span class="file-list" v-for="(item, index) in detailObj.assetApplicationFormList"
                                  :key="index">
                                <Tag class="item-src" color="blue" type="border" @click.native="handlePreview(item)">
                                    {{ item.fileName }}
                                </Tag>
                            </span>
                            </Col>
                        </Col>
                    </Row>
                </div>
                <div class="basic-info-body">
                    <Row style="border-right: 1px solid #eeeeee;">
                        <Col span="24">
                            <Col class="basic-info-body-label-file" span="4">{{ $t('preliminary.SATReport') }}</Col>
                            <Col span="18" class="file-content">
                            <span class="file-list" v-for="(item, index) in detailObj.satBillList" :key="index">
                                <Tag class="item-src" color="blue" type="border" @click.native="handlePreview(item)">
                                    {{ item.fileName }}
                                </Tag>
                            </span>
                            </Col>
                        </Col>
                    </Row>
                </div>
                <div class="basic-info-body">
                    <Row style="border-top: 1px solid #eeeeee; border-right: 1px solid #eeeeee;">
                        <Col span="24">
                            <Col class="basic-info-body-label-file" span="4">{{ $t('preliminary.ShipmentList') }}</Col>
                            <Col span="18" class="file-content">
                        <span class="file-list" v-for="(item, index) in detailObj.shippingList" :key="index">
                            <Tag class="item-src" color="blue" type="border" @click.native="handlePreview(item)">
                                {{ item.fileName }}
                            </Tag>
                        </span>
                            </Col>
                        </Col>
                    </Row>
                </div>
                <div class="basic-info-body">
                    <Row style="border: 1px solid #eeeeee;">
                        <Col span="24">
                            <Col class="basic-info-body-label-file" span="4">{{ $t('preliminary.Others') }}</Col>
                            <Col span="18" class="file-content">
                            <span class="file-list" v-for="(item, index) in detailObj.otherDocumentList" :key="index">
                                <Tag class="item-src" color="blue" type="border" @click.native="handlePreview(item)">
                                    {{ item.fileName }}
                                </Tag>
                            </span>
                            </Col>
                        </Col>
                    </Row>

                </div>
            </div>

        </Card> -->
        <Card :title="`${$t('maintenance.Equipmentarrivalrecord')}`" class="detail-content-layout mt16">
            <div class="basic-info">
                <!--        <div class="basic-info-title">-->
                <!--          <h2>{{ $t('maintenance.Equipmentarrivalrecord') }}</h2>-->
                <!--        </div>-->
                <div class="tableContent">
                    <Table :border="false" :columns="columns" :data="detailObj.dmsDeliveryList">
                        <template slot-scope="{ row }" slot="deliveryCertificateList">
                            <Tag class="item-src" color="blue" type="border"
                                 v-for="(item, index) in row.deliveryCertificateList"
                                 :key="index"
                                 @click.native="handlePreview(item)">
                                {{ item.fileName }}
                            </Tag>
                        </template>
                    </Table>
                    <!--                <Timeline>-->
                    <!--                    <TimelineItem color="green">2021年9月15日</TimelineItem>-->
                    <!--                    <TimelineItem color="yellow">2021年8月15日</TimelineItem>-->
                    <!--                </Timeline>-->
                </div>
            </div>
        </Card>
    </div>

</template>

<script>
export default {
    name: "detailPurchaseModal",
    data() {
        return {
            params: {},
            detailObj: {},
            columns: [
                {
                    title: `${this.$t('preliminary.ArrivalDate')}`,
                    key: 'arrivalDate',
                    align: 'center',

                },
                {
                    title: `${this.$t('preliminary.ReceivedQuantity')}`,
                    key: 'arrivalNum',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.OrderQuantity')}`,
                    key: 'menge',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.arrivaldocuments')}`,
                    slot: 'deliveryCertificateList',
                    align: 'center',
                },
            ],
            dataSource: []
        }
    },
    created() {
        // this.detailObj.werksName = this.$route.query.werksName
        this.params = {
            requestNo: this.$route.query.requestNo,
            requestProject: this.$route.query.requestProject,
            orderNo: this.$route.query.orderNo,
            orderProject: this.$route.query.orderProject,
            id: this.$route.query.id,
        }
        console.log(this.params)
        this.getPurchaseDetailList()
        // this.getUploadFile()
    },
    methods: {
        close() {
            this.$router.go(-1)
        },
        //文件预览
        handlePreview(item) {
            if (item) {
                window.open(this.util.filePathToUrl(item.filePath));
            }
        },
        getPurchaseDetailList() {
            this.axios({
                method: 'get',
                url: '/dms/devicePurchase/selectById',
                params: {
                    id: this.$route.query.id
                }
            }).then(res => {
                if (res.code === 200) {
                    this.detailObj = res.data
                    // this.dataSource = res.data.dmsDeliveryList
                    // this.detailObj.dmsDeliveryList.forEach(item => {
                    //     item.menge = res.data.menge
                    // });

                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.basic-info {
    //margin: 20px 0;

    .basic-info-title {
        margin-bottom: 20px;
        height: 24px;

        span {
            display: inline-block;
            width: 7px;
            height: 24px;
            background: #187bdb;
        }

        h2 {
            display: inline-block;
            font-size: 16px;
            padding-left: 10px;
            position: relative;
            line-height: 24px;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
        }
    }

    .basic-info-body {
        color: #333;
        font-size: 13px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;

        .basic-info-body-label {
            display: inline-block;
            width: 100%;
            height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            text-align: left;
            padding: 0 10px;
            /*border-left: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }

        .basic-info-body-label-file {
            display: inline-block;
            width: 200px;
            min-height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            text-align: right;
            padding: 0 10px;
            /*border-left: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }

        .basic-info-body-item {
            display: inline-block;
            width: 100%;
            text-align: left;
            height: 48px;
            line-height: 48px;
            padding: 0 10px;
        }

        .file {
            color: #187bdb;
            cursor: pointer;
        }

        .file-content {
            min-height: 48px;
            display: flex;
            align-items: center;

            .file-list {
                height: 100%;
                word-wrap: break-word;
                color: #187bdb;
                cursor: pointer;

                .item-src {
                    margin-left: 25px;
                    line-height: 20px;
                    color: #187bdb;
                    cursor: pointer;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                }

                .item-icon {
                    width: 20%;
                    display: inline-block;
                    margin-top: 4px;
                }
            }
        }
    }
}

.over-wrapper {
    max-width: 199px;
    /*height: 23px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
</style>
